import React from 'react';

import { getUserProfile } from '@/entities/profile/model/selectors';
import { ProfileTabVariants } from '@/shared/interfaces';
import { getProfileTabs } from '@/shared/lib/profileTab';
import { useAppSelector } from '@/shared/store';
import { Container } from '@/shared/ui/Container';
import { Wrapper } from '@/shared/ui/Wrapper';
import { Footer } from '@/widgets/Footer';
import { Header } from '@/widgets/Header';

import { PremiumCard } from '../Course/ui/ActionCard/PremiumCard';
import cs from './Profile.module.scss';
import { ActionCard } from './ui/ActionCard';
import { Tab } from './ui/Tabs';

export const Profile = ({ tab }: { tab: ProfileTabVariants }) => {
  const { isPremium } = useAppSelector(getUserProfile);
  return (
    <div className={cs.container}>
      <Header className={cs.header} />
      <Wrapper className={cs.wrapper}>
        <Container className={cs.wrap}>
          <div className={cs.page}>
            <div className={cs.floating_container}>
              <div className={cs.float_menu}>
                <ActionCard activeTab={tab} className={cs.item} data={getProfileTabs(isPremium)} />
              </div>
              {!isPremium && <PremiumCard />}
            </div>
            <Tab tab={tab} />
          </div>
        </Container>
      </Wrapper>
      <Footer className={cs.footer} />
    </div>
  );
};
